<template>
    <!-- 遮罩层！ -->
    <div v-if="verifyShow" class="mask">
        <div class="slideContainer">
            <!-- 滑动图片验证组件（gitee：vue-monoplasty-slide-verify） -->
            <slide-verify ref="slideblock" @again="onAgain" @fulfilled="onFulfilled" @success="onSuccess" @fail="onFail"
                @refresh="onRefresh" slider-text="向右滑动验证"></slide-verify>
            <div style="margin-top:15px;text-align: center;">{{ text }}</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            text: '',
            verifyShow: true
        }
    },
    methods: {
        onSuccess(times) {
            this.text = `登录成功, 耗时${(times / 1000).toFixed(1)}秒`
            setTimeout(() => {
                this.verifyShow = false
            }, 1000);
        },
        onFail() {
            console.log('验证不通过');
            this.text = '验证不通过'
        },
        onRefresh() {
            // 点击刷新
            console.log('点击了刷新小图标');
        },
        onFulfilled() {
            console.log('刷新成功啦！');
            this.text = '重新验证';
        },
        onAgain() {
            console.log('检测到非人为操作的哦！');
            this.text = '重新验证';
            // 刷新
            this.$refs.slideblock.reset();
        },
        handleClick() {
            this.$refs.slideblock.reset();
        },
    }
}
</script>

<style scoped>
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
}

.mask .slideContainer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255);
    padding: 15px;
}
</style>